<template>
  <div class="center-card">
    <!-- 设置容器位置 -->
    <el-row :gutter="10" style="margin-bottom: 20px">
      <el-col :span="7">
        <div class="card-container">
          <h2>分类数量</h2>
          <!-- 图 -->
          <PieEchart></PieEchart>
        </div>
      </el-col>
      <el-col :span="10">
        <div class="card-container">
          <h2>不同城市的销量</h2>
          <ChinaMap></ChinaMap>
        </div>
      </el-col>
      <el-col :span="7">
        <div class="card-container">
          <h2>分类数量</h2>
          <PieEchart2></PieEchart2>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-bottom: 20px">
      <el-col :span="12">
        <div class="card-container">
          <h2>分类数量</h2>
          <LineEchart></LineEchart>
        </div>
      </el-col>
      <el-col :span="12">
        <div class="card-container">
          <h2>分类数量</h2>
          <BarEchart></BarEchart>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
// @ts-ignore
import PieEchart from '@/components/echart/PieEchart.vue'
import PieEchart2 from '@/components/echart/PieEchart2.vue'
import ChinaMap from '@/components/echart/ChinaMap.vue'
import LineEchart from '@/components/echart/LineEchart.vue'
import BarEchart from '@/components/echart/BarEchart.vue'
</script>

<style lang="scss" scoped>
.center-card {
  width: 100%;
  padding: 0 20px;

  .card-container {
    background-color: rgba(244, 240, 243, 0.8);
    opacity: 0.7;
    border-radius: 5px;
    transition: all 0.3s;
    cursor: pointer;

    &:hover {
      box-shadow: 1px 1px 1px #ccc;
    }
    h2 {
      font-size: 20px;
      font-weight: 500;
      margin-bottom: 15px;
      padding: 10px 15px;
      border-bottom: 1px solid #ccc;
    }
  }
}
</style>
